<template>
  <v-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    max-width="500px"
    @click:outside="close"
  >
    <v-card>
      <v-card-title>授权组织</v-card-title>
      <v-card-text>
        <v-list>
          <template v-for="(item, index) in orgData" :key="item.id">
            <v-list-item>
              <template v-slot:prepend>
                <v-checkbox
                  v-model="checkedKeys"
                  :value="item.id"
                  hide-details
                  density="compact"
                ></v-checkbox>
              </template>
              <v-list-item-title>{{ item.orgName }}</v-list-item-title>
            </v-list-item>
            
            <v-list v-if="item.children && item.children.length" class="pl-4">
              <v-list-item
                v-for="child in item.children"
                :key="child.id"
              >
                <template v-slot:prepend>
                  <v-checkbox
                    v-model="checkedKeys"
                    :value="child.id"
                    hide-details
                    density="compact"
                  ></v-checkbox>
                </template>
                <v-list-item-title>{{ child.orgName }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </template>
        </v-list>

        <div class="org-default mt-4">
          <span class="text-subtitle-2">默认组织：</span>
          <v-select
            v-model="defOrgId"
            :items="checkedOrgList"
            item-title="orgName"
            item-value="id"
            placeholder="请选择默认组织"
            variant="outlined"
            density="compact"
            class="mt-2"
          ></v-select>
        </div>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn
          color="grey-darken-1"
          variant="text"
          @click="close"
        >
          取消
        </v-btn>
        <v-btn
          color="primary"
          @click="submit"
        >
          确定
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import { getTreeByDefWithUserToLike } from "@/api/system/org/orgManagement";
import { isNull } from "@/utils/validate";

export default {
  name: "UserManagementSetOrg",
  props: {
    isGen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      orgData: [],
      checkedKeys: [],
      defOrgId: "",
      checkedOrgList: [],
      currentRow: null,
    };
  },
  methods: {
    async showCheckChoose(checkedKeys, defOrgId, row) {
      this.currentRow = row;
      this.checkedKeys = checkedKeys;
      this.defOrgId = defOrgId;
      this.dialogFormVisible = true;
      await this.fetchData();
    },
    async fetchData() {
      const { data } = await getTreeByDefWithUserToLike();
      if (!isNull(data)) {
        this.orgData = data;
      }
    },
    close() {
      this.dialogFormVisible = false;
      this.orgData = [];
      this.checkedKeys = [];
      this.defOrgId = "";
      this.checkedOrgList = [];
    },
    submit() {
      this.checkedOrgList = this.orgData.filter(item => 
        this.checkedKeys.includes(item.id) || 
        (item.children && item.children.some(child => this.checkedKeys.includes(child.id)))
      );
      
      if (this.checkedOrgList.length === 0) {
        this.$baseMessage("请选择组织", "error");
        return;
      }
      if (isNull(this.defOrgId)) {
        this.$baseMessage("请选择默认组织", "error");
        return;
      }
      this.$emit("choose", {
        defOrg: this.defOrgId,
        orgList: this.checkedOrgList,
      }, this.currentRow);
      this.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.v-card {
  .v-card-title {
    font-size: 1.25rem;
    font-weight: 500;
  }
  
  .v-card-text {
    padding-top: 16px;
  }
}

.org-default {
  .v-select {
    width: 100%;
  }
}
</style> 